// step1: 获取首页传过来的filmId
var str = location.search;
var filmId = str.replace(/^\?filmId=(.*)/, '$1');

// console.log(filmId);



var detail = {
    // step2: 请求数据
    getDetail: function(filmId) {
        var self = this;
        var url = '../data/getDetail.json';
        $.ajax({
            type: 'get',
            url: url,
            data: {
                filmId: filmId
            },
            dataType: 'json',
            success: function(res) {
                // 如果res.code==='666', 就调用渲染详情的方法, 否则就提示出了什么问题
                if (res.code === '666') {
                    self.renderFilm(res.film);
                } else {
                    alert(res.msg);
                }

            }
        });
    },

    // step3: 渲染详情
    renderFilm: function(film) {
        document.querySelector('#app').innerHTML = `<header>
        <img id="img" src="${film.poster}" class="w100pc">
        <a class="fixed flex fcc" href="#">
            <span class="icon iconfont">&#xe64b;</span>
        </a>
    </header>

    <!-- 影片详情 -->
    <main>
        <div class="detail bg-fff ">
            <div class="flex jc-sb lh15">
                <p>
                    <span class="f18 name">老师·好</span>
                    <span class="type">2D</span>
                </p>
                <p class="yellow"> <i class="f16">7</i> <span class="f12">分</span></p>
            </div>
            <p class="mt-10 f14 gray">剧情</p>
            <p class="f14 gray mt-10">2019-03-22上映</p>
            <p class="f14 gray mt-5">中国大陆 | 100分钟</p>
            <p class="f14 gray mt-15 lh">
                1985年的南宿一中，苗宛秋老师推自行车昂首走在校园， 接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、
            </p>
        </div>


        <!-- 演职人员 -->
        <div class="performer bg-fff mt-10">
            <p class="font">演职人员</p>
            <ul id="actors" class="flex ever">
                          
            </ul>
        </div> 
    </main>

    <!-- 选座购票 -->
    <p class="buttom">选座购票</p>`;

        // 调用渲染演员列表的方法  
        this.renderActors(film.actors);
    },

    // step4: 渲染演员列表
    renderActors(list) {
        var str = '';
        list.forEach(function(item) {
            str += `    <li class="flex2 aic ml-10">
                <img src="${item.avatarAddress}" class="image">
                <p class="f12 lh15">于谦 </p>
                <p class="f12 lh15 gray">苗宛秋</p>
            </li>`;
        })
        document.querySelector('#actors').innerHTML = str;
    }
}

detail.getDetail(filmId);